.Chat{
   position:relative;
   width:100%;
   height:100%;
   .ChatBox{
   	  position:absolute;
      left:0;
      top:0;
   	  width:260px;
   	  height:100%;
   	  min-height:638px;
   	  border-right:1px solid #e1e2e6;
   	  background:#f0f2f5;
      user-select:none;
      z-index:2;
   	  .ChatSerch{
   	  	padding:19px 11px 11px 12px;
   	  	input{
          display:none;
      		width: 197px;
      		height: 40px;
      		padding:0 10px 0 30px;
      		font-size: 12px;
      		font-family: "Microsoft YaHei";
      		color:#666;
      		border:0;
      		outline:none;
      		background:rgb(229,231,233) url(../../images/icon.png) no-repeat 10px center;
   	  	}
   	  }

   	  .ChatList{
   	  	width:100%;
   	  	height:auto;
   	  	overflow:hidden;
   	  	overflow-y:auto;
        -webkit-user-select:none;
        &::-webkit-scrollbar{
           width: 5px;     
           height: 4px;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }
        &:hover{
          &::-webkit-scrollbar-track {
              -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
              border-radius: 0;
              background: rgba(0,0,0,0.1);
          }
        }
        ul{
          width:100%;
   	  	  height:auto;
          min-height:568px;
   	  	}
        .current{
          .userMessageNum{
            display:none;
            opacity:0;
            -webkit-opacity:0;
          }
        }
   	  	li{
          height:42px;
          padding:11px 12px;
          cursor:pointer;
          &:hover,&.current{
            background:#dee2e7;
          }
          &:active{
          	background:#d0d5d8;
          }
          .userHd{
          	position:relative;
          	float:left;
          	width:42px;
          	height:42px;
          	margin-right:10px;
            &:hover{
              .online_game em{
                display:inline-block;
              }
            }
          	.userHdImg{
              position:relative;
          		width:42px;
          		height:42px;
          		border-radius:50%;
          		overflow:hidden;
          		background:#999;
          		img{
          			// max-width:100%;
          			max-height:100%;
                position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%,-50%);transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
          		}
          	}
          	.onlineState{
          		position:absolute;
          		right:0;
          		bottom:0;
          		width:12px;
          		height:9px;
              em{
                display:none;
                position:absolute;
                left:15px;
                line-height:28px;
                text-align:center;
                min-width: 98px;
                padding:0 5px 0 20px;
                height: 28px;
                font-size: 12px;
                font-family: "Microsoft YaHei";
                color: rgb(89, 89, 89);
                border:1px solid  rgb(118, 118, 118);
                border-radius: 4px;
                background-image: -moz-linear-gradient( 90deg, rgb(228,229,240) 0%, rgb(255,255,255) 100%);
                background-image: -webkit-linear-gradient( 90deg, rgb(228,229,240) 0%, rgb(255,255,255) 100%);
                background-image: linear-gradient( 90deg, rgb(228,229,240) 0%, rgb(255,255,255) 100%);
                background-image: -ms-linear-gradient( 90deg, rgb(228,229,240) 0%, rgb(255,255,255) 100%);
                box-shadow: 1.5px 2.598px 6px 0px rgba(0, 0, 0, 0.33);
                white-space: nowrap;
                i{
                  position:absolute;
                  left:5px;
                  top:5px;
                  display:inline-block;
                  width:16px;
                  height:16px;
                }
              }
          	}
          	.online_game{
          		background:url(../../images/icon_game.png) no-repeat center;
              i{
                background:url(../../images/game.png) no-repeat center;
              }
          	}
          }
          .userInfo{
          	float:left;
          	width:179px;
          	height:100%;
          	div{
          		width:100%;
          		height:21px;
          		line-height:21px;
              &:last-child{
                margin-top:3px;
              }
          	}
          	.name{
          		width:140px;
      				font-size: 14px;
      				font-family: "Microsoft YaHei";
      				color: rgb(64, 64, 64);
          	}
          	.userMessageNum{
              float:right;
              display:inline-block;
              font-size: 11px;
              min-width: 10px;
              height: 20px;
              padding:0 5px;
              text-align:center;
              font-family: "Arial";
              color: rgb(255, 255, 255)!important;
              border-radius: 20px;
              background-color: rgb(247, 76, 49);
          	}
          	.oneMessage{
          		width:140px;
      				font-size: 12px;
      				font-family: "Microsoft YaHei";
      				color: rgb(128, 128, 128);
          	}
          	.userInfoTime{
      				font-size: 12px;
      				font-family: "Arial";
      				color: rgb(179, 179, 179);
          	}
          	.textHidden{
          		display:inline-block;
      				text-overflow: ellipsis;
      				overflow: hidden;
      				white-space: nowrap;
          	}
          }
   	  	}
        .offline{
          img{
             -webkit-filter: grayscale(95%);
          }
          div,span{
            color: rgb(179, 179, 179) !important;
          }
        }
   	  }
   }
}
